<template>
  <el-form
    ref="formRef"
    :rules="rules" 
    :model="form" 
    label-width="20vw" 
    style="border: 2px #EEA8A8 solid; border-radius: 20px; margin-top: 3em;"
  >
    <br>
    <el-form-item label="商品名称">
      {{ form.data.name }}
    </el-form-item>
    <el-form-item label="商品描述" style="white-space: pre-line;">
      {{ form.data.description }}
    </el-form-item>
    <el-form-item label="商品规格" prop="data.subscribe">
      <el-radio-group v-model="form.data.subscribe">
        <el-radio v-for="sp in specifications" :key="sp[0]" :label="sp[0]">{{ sp[1] }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item>
      <el-button @click="subscribe">确认订购</el-button>
    </el-form-item>
    <br>
  </el-form>
</template>

<script>
import { ref, reactive, watch, onUpdated, onMounted, computed } from 'vue'
import { useRoute } from 'vue-router'
import axios from 'axios'
import { ElMessageBox } from 'element-plus'
import Cookie from 'js-cookie'
import useIPAddress from '../hooks/useIPAddress.js'

export default {
  setup() {

    // 配置axios请求的ip地址
    const ip = useIPAddress()

    // 操作页面
    const route = useRoute()

    // 表单数据
    const form = reactive({
      data: {},
      id: route.params.id,
    })

    // 获取 Cookie
    const userCookie = JSON.parse(Cookie.get('cookie'))
    
    // 抄的vue-router的官方文档，没懂，解决了useRoute函数在切换商品时不调用的bug
    watch(
      () => route.params.id,
      newId => {
        form.id = newId
      }
    )

    // 将form.data中的specification数据转化为数组
    const specifications = computed(() => form.data.specification ? Object.entries(form.data.specification) : [])

    // 切换路由时更新商品数据
    function updateMerchandise() {
      axios({
        url: `http://${ip}/get-one-merchandise`,
        method: 'GET',
        params: {id: form.id}
      }).then((res) => {
        form.data = res.data
      })
    }
    onUpdated(() => {
      updateMerchandise()
    })
    onMounted(() => {
      updateMerchandise()
    })

    // 用于表单验证
    const formRef = ref()

    // 订购商品
    function subscribe() {
      formRef.value.validate(valid => {
        if (valid) {
          axios({
            url: `http://${ip}/subscribe`,
            method: 'POST',
            data: {
              merchandiseID: form.data._id,
              name: form.data.name,
              userID: userCookie.id,
              subscribe: form.data.subscribe
            }
          }).then((res) => {
            ElMessageBox.alert(res.data, 'Success')
          })
        }
      })

    }

    // 表单验证规则
    const rules = {
      "data.subscribe": [
        {
          required: true,
          message: '请先选择您订购的套餐',
          trigger: 'change'
        }
      ]
    }

    return {
      form,
      specifications,
      subscribe,
      rules,
      formRef
    }
  }
}
</script>

<style>
  .el-radio__input.is-checked + .el-radio__label {
      color: #EEA8A8;
  }
  .el-radio__input.is-checked .el-radio__inner {
      background: #EEA8A8;
      border-color: #EEA8A8;
  }
  .el-form-item__content {
    margin-right: 25px;
  }
  .el-button:hover{
    background-color: #eea8a848;
    border-color: #EEA8A8;
    color: #EEA8A8;
  }
  .el-button:focus {
    background-color: #eea8a848;
    border-color: #EEA8A8;
    color: #EEA8A8;
  }
  .el-message-box {
    margin-bottom: 5rem;
  }
</style>